<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- ---放置树形组件 data用来展示数据  props用来配置从哪里读取--- -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容  => 有多少个节点循环多少次 -->
          <!-- scope-scope 是 tree组件传给每个节点的插槽的内容的数据 -->
          <!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 -->
          <!--  -->
          <template v-slot="{data}">
            <tree-tools :tree-node="data" @delDepts="getDepartments()" @addDepts="addDepts" @editDepts="editDepts" />
          </template>

        </el-tree>
      </el-card>
    </div>
    <add-dept ref="addDepts" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments()" />
  </div>

</template>

<script>
import { getDepartments } from '@/api/departments'
// 把一个对象当成函数去使用 报错Object(...) is not a function
import TreeTools from './components/tree-tools.vue'
import { tranListToTreeData } from '@/utils'
import AddDept from './components/add-dept.vue'

export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      loading: false, // 定义一个进度条变量
      // 组织架构的数据
      departs: [],

      company: { },
      node: null,
      showDialog: false,
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      }
    }
  },
  created() {
    this.getDepartments()
  }, // 调用自身的方法,
  methods: {
  // 单独定义一个方法
    async  getDepartments() {
      // 调用引入的方法
      this.loading = true // 打开遮罩
      const result = await getDepartments()
      this.departs = tranListToTreeData(result.depts, '')
      this.company = {
        name: result.companyName,
        manager: '负责人',
        id: ''
      }
      // await总是会等到后面的promise进行reslove
      await new Promise(resolve => setTimeout(() => resolve(), 500))
      this.loading = false
    },
    addDepts(node) {
      this.showDialog = true // 显示弹层
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node
    },
    editDepts(node) {
      this.showDialog = true
      this.node = node
      this.$refs.addDepts.getDepartmentDetail(node.id)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
